<template>
  <Drawer v-bind="$attrs" :inner-loading="innerLoading">
    <DetailedLayout>
      <template #header>
        <DetailedHeader />
        <TabsMenu :list="tagMenuList" @change="tagMenu" />
      </template>
      <DetailedModule v-if="modules === 'detailed'" />
      <DetailedFile v-if="modules === 'file'" />
      <detailedTabFollow v-if="modules === 'follow'" />
    </DetailedLayout>
  </Drawer>
</template>
<script lang="ts" setup>
  import Drawer from "@/components/drawer/index.vue"
  import TabsMenu from "@/components/tabsMenu/index.vue"
  import DetailedLayout from "../../components/detailedLayout/index.vue"
  import DetailedHeader from "../../components/detailedHeader/index.vue"
  // tab-module
  import DetailedModule from "./content.vue"
  import DetailedFile from "../../components/detailedTabFile/index.vue"
  import detailedTabFollow from "../../components/detailedTabFollow/index.vue"

  const modules = ref<string | undefined>("detailed")

  const tagMenuList = ref([
    { label: "详情", value: 1, key: "detailed", dot: true, number: 5 },
    { label: "文件", value: 2, key: "file", number: 20 },
    { label: "跟进", value: 3, key: "detailed" },
    // { label: "课程成员", value: 4, key: 'follow' },
  ])
  interface tagMenuInterface {
    key?: string
  }
  const tagMenu = (item: tagMenuInterface): void => {
    modules.value = item.key
  }

  const innerLoading = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        resolve()
      }, 2000)
    })
  }
</script>
